<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">人员简历</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}"> > {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable"  v-show="!addShow">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <div style="margin-bottom:20px;float: right;">
            <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
              <el-input
                size="small"
                placeholder="查找"
                style="width: 136px;"
                v-model.trim="inputValue"
                @keydown.enter.native="searchMsg"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  style="cursor: pointer;"
                  @click="searchMsg"
                ></i>
              </el-input>
              <div style="margin-left:5px">
                <el-button
                  class="newcon"
                  size="small"
                  round
                   @click="addshow"
                >新增
                </el-button>
                <el-button
                  class="edit"
                  :class="{'active1' : newcolor1}"
                  size="small"
                  @click="editClick"
                  round
                >修改
                </el-button>
                <el-button class="delete" @mousedown.native="deletedown" @mouseup.native="deleteup"
                         @click="deletedata"
                         :class="{'active2' : newcolor2}" size="small" round>删除
              </el-button>
                <el-button
                  class="download"
                  size="small"
                  @click="download"
                  round>导出
                </el-button>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            class="resutable"
            :data="tableData"
            :row-key="getRowKey"
            ref="multipleTable"
            @selection-change="handleSelectionChange">
            <el-table-column
              style="border:1px solid #333"
              type="selection"
              :reserve-selection="true"
              width="55">
            </el-table-column>
            <el-table-column
              label="姓名"
              width="120">
              <template slot-scope="scope">
                <!-- prop="name" -->
                <span style="cursor: pointer; color:#1198ff;"
                      @click="viewdetail(scope.row)">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column label="出生年月">
              <template slot-scope="scope">
                <span>{{scope.row.birth | converTime("YYYY-MM")}}</span>
              </template>
            </el-table-column>
            
            <el-table-column prop="mail" label="联系邮箱"></el-table-column>
            <el-table-column prop="phone" label="联系方式"></el-table-column>
            <el-table-column prop="workYear" label="工作年限"></el-table-column>
            <el-table-column label="到岗时间">
              <template slot-scope="scope">
                <span>{{scope.row.arriveTime}}</span>
              </template>
            </el-table-column>
            <el-table-column label="毕业时间">
              <template slot-scope="scope">
                <span>{{scope.row.gurateTime | converTime("YYYY-MM")}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="gurateSchool" label="毕业院校"></el-table-column>
            <el-table-column prop="major" label="专业"></el-table-column>
           <el-table-column prop="guration" label="学历"></el-table-column>
          </el-table>
          <el-col class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </el-col>

        </el-col>
      </el-row>
    </div>

    <el-dialog
        title="错误"
        :visible.sync="editdialogVisible"
        width="30%"
        :before-close="handleClose"
        class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何人员简历</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
                  <el-button class="sure" round @click="handleOpen">确 定</el-button>
                  <el-button round @click="handleClose" class="cancel">取 消</el-button>
                </span>
    </el-dialog>
    <el-dialog
        title="错误"
        :visible.sync="editdialogVisible1"
        width="30%"
        :before-close="handleClose1"
        class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">请不要同时选择多条人员简历</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
                  <el-button class="sure" round @click="handleOpen1">确 定</el-button>
                  <el-button round @click="handleClose1" class="cancel">取 消</el-button>
                </span>
    </el-dialog>
    <el-dialog
      title="删除人员简历"
      :visible.sync="deletedialogVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">确定删除该人员简历吗？</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="deletedis" round @click="deletesend">确 定</el-button>
    <el-button round @click="deleteClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <div class="choosedia">
    <el-dialog
        title="请选择简历模板"
        width="56%"
        :visible.sync="dialogVisible"
        :before-close="modelClose">
      <el-row type="flex" justify="center">
        <el-col :span="8"  style="text-align:center" v-for="(item,index) of swiperList" :key="index">
          <img :src="item.imgUrl" class="picture" :class="{'active' : item.newcolor2}"  @click="chooseimg(index) "/>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
                <el-button class="sure" :disabled="savedis" round @click="modelOpen">确 定</el-button>
                <el-button round @click="modelClose">取 消</el-button>
            </span>
    </el-dialog>
    </div>

    <!--详情组件-->
    <div v-if="type == 3">
      <person-detail :detail-code="detailcode" v-show="addShow"  ref="persondetail"></person-detail>
    </div>
    <div v-if="type == 4">
      <edit-person :current-data="multipleSelection[0]" @getData="getdata" ref="editperson" v-show="addShow" ></edit-person>
    </div>
    <div v-if="type == 5">
      <add-person @getData="getdata1" @getData1="getdata" ref="addperson" v-show="addShow" ></add-person>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  import moment from 'moment'
  import tagsView from '../../store/modules/tagsView'
  import AddPerson from './addperson.vue'
  import EditPerson from './editperson.vue'
  import PersonDetail from './persondetail.vue'

  export default {
    components:{
      AddPerson,
      EditPerson,
      PersonDetail
    },
    name: "personnelresume",
    data() {
      return {
        newcolor1: false,
        newcolor2: false,
        inputValue: "",
        secondshow: false,
        tableData: [],
        multipleSelection: [],
        currentPage: 1,
        pagesize: 15,
        totalcount: 0,
        savedis:true,
        editdialogVisible: false,
        editdialogVisible1: false,
        dialogVisible: false,
        deletedialogVisible:false,
        detailcode: '',
        detailno: '',
        type: null,
        deletedis: false,
        secondtitle: '',
        addShow: false,
        swiperList:[
            {
              imgUrl: '../../static/image/model2.png',
              imgId:"tempOne",
              newcolor2:false
              },
            {imgUrl: '../../static/image/model3.png',imgId:"tempTwo",newcolor2:false},
            {imgUrl: '../../static/image/model1.png',imgId:"tempThree",newcolor2:false}
        ]
      }
    },
    created() {
      this.success();
     this.title = this.$route.meta.title;
      
    },
    methods: {
      success() {
        axios.post(this.url + '/peopleResume/selPeopleResume', {
          condition: this.inputValue,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
        this.addShow = false;
        this.secondshow = false;
      },
      getdata() {
        this.addShow = false;
        this.secondshow = false;
        this.$refs.multipleTable.clearSelection();
        this.success();
      },
      getdata1() {
        this.addShow = false;
        this.secondshow = false;
        this.currentPage = 1;
        this.success();
      },
      getRowKey(row) {
        return row.id
      },
      tableshow(row) {
        this.addShow = false;
        this.secondshow = false;
        this.type = null;
        this.success();
      },
      searchMsg() {
        this.currentPage = 1;
        axios.post(this.url + '/peopleResume/selPeopleResume', {
          condition: this.inputValue,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
     addshow() {
        this.addShow = !this.addShow
        this.secondtitle = "新增反馈"
        this.secondshow = true
        this.type = 5;
        this.$nextTick(() => {
          if (this.$refs.uploadAdd) {
            this.$refs.uploadAdd.initdata();
            this.$refs.uploadAdd.clearData();
            this.$refs.uploadAdd.resetFields('form');
          }
        })
      },
       // 修改按钮点击
      editClick() {
        if (this.multipleSelection.length == 1) {
          
          document.documentElement.style.overflow = 'auto';
          this.addShow = !this.addShow
          this.secondtitle = "修改反馈"
          this.secondshow = !this.secondshow
          this.type = 4
          //修改子组件的事件触发
            if (this.$refs.EditPerson) {
              this.$refs.EditPerson.clearData();
              this.$refs.EditPerson.resetFields('form');
            }
          
        } else if(this.multipleSelection.length > 1){
          document.documentElement.style.overflow = 'hidden';
          //选择多个表格行，展示的弹出框
          this.editdialogVisible1 = !this.editdialogVisible1;
        } else if(this.multipleSelection.length == 0){
          document.documentElement.style.overflow = 'hidden';
          //未选择表格行，展示的弹出框
          this.editdialogVisible = !this.editdialogVisible;
        }
        
      },
   
     

        //删除弹出框
      deletedata(row) {
        if (this.multipleSelection.length >= 1) {
          this.deletedialogVisible = !this.deletedialogVisible;
          document.documentElement.style.overflow = 'hidden';
        }  else {
          this.editdialogVisible = !this.editdialogVisible;
          this.deletedis = false;
          document.documentElement.style.overflow = 'hidden';
        }
      },
      //关闭删除弹出框
      deleteClose() {
        this.deletedialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      //发送删除请求
      deletesend() {
        this.deletedialogVisible = false;
        this.deletedis = true;
        var ids = [];
        for(var i = 0;i <= this.multipleSelection.length-1;i++){
          ids.push(this.multipleSelection[i].id)
        }
        axios.post(this.url + '/peopleResume/delPeopleResume',{
          id: ids,
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.deletedialogVisible = false;
            this.deletedis = false;
            this.currentPage = 1;
            this.$refs.multipleTable.clearSelection();
            this.success();
            document.documentElement.style.overflow = 'auto';
          }
        })
      },
      deletedown() {
        this.newcolor2 = true
      },
      deleteup() {
        this.newcolor2 = false
      },
      // 下载按钮点击
      download() {
        if (this.multipleSelection.length >= 1) {
          this.dialogVisible = true;
          this.savedis = true;
          //清空简历选择
          for(var i =  0;i <this.swiperList.length;i++){
                this.swiperList[i].newcolor2 = false;
          }
          document.documentElement.style.overflow = 'hidden';
        }  else {
          this.editdialogVisible = !this.editdialogVisible;
          document.documentElement.style.overflow = 'hidden';
        }
        },
        chooseimg(index){
          for(var i = 0;i < this.swiperList.length; i++ ){
            if(i == index){
              this.swiperList[i].newcolor2= true;
            }else{
              this.swiperList[i].newcolor2= false;
            }
          }
          if(this.swiperList[index].newcolor2=true){
            this.savedis = false;
            this.imgId = this.swiperList[index].imgId;
          }
        },
        modelOpen(){
          var ids = [];
        for(var i = 0;i <= this.multipleSelection.length-1;i++){
          ids.push(this.multipleSelection[i].id)
        }
             axios.post(this.url + "/peopleResume/exportWord", {
               template:this.imgId,
               id:ids
             }).then(res => {
            this.unlogin(res.data.code);
            if (res.data.code !== -1) {
              window.location.href = this.url + "/peopleResume/exportWord?template="  + this.imgId + "&&id=" + ids
            }
          })
        },
        modelClose(){
          
        this.dialogVisible = false;
        this.savedis = true;
        document.documentElement.style.overflow = 'auto';
        },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.success();
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.success();
      },
 
      viewdetail(val) {
        this.detailcode = val;
        this.addShow = !this.addShow
        this.secondtitle = "查看人员简历内容"
        this.secondshow = !this.secondshow
        this.type = 3
      },
     handleOpen1() {
        this.editdialogVisible1 = false;
        document.documentElement.style.overflow = 'auto';
      },
      handleClose1() {
        this.editdialogVisible1 = false;
        document.documentElement.style.overflow = 'auto';
      },
      // 请选择简历警告 隐藏方法
      handleOpen() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      handleClose() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
    },
    watch: {
      'inputValue': function (val) {
        if (val == '') {
          this.currentPage = 1;
          this.success()
        }
      }
    },
    

  }
</script>
<style scoped>
.picture{
  border:1px solid #fff;
}
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .textactive {
    color: #1099ff;
  }
.swiper{
    float: left;
}
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  .delete {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
  }
  
  .delete:hover {
    color: #fff !important;
  }
  
  .delete:focus {
    color: #fff !important;
  }
  .active2 {
    background: linear-gradient(to bottom, #ff9600 0%, #d68300 100%);
  }
.download {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-left: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #2e5b9a 0%, #304a6c 100%);
  }
  .download:hover {
    color: #fff !important;
  }
  
  .download:focus {
    color: #fff !important;
  }
 .edit {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
    padding: 7px 15px !important;
  }
  .edit:hover {
    color: #fff !important;
  }
.newcon {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  }
  .newcon:hover {
    color: #fff !important;
  }

  .active {
    border-color:#ff5c5c;
  }
.active1 {
    background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
  }

  .resutable {
    background-color: #fff;
  }

  .pager {
    margin-top: 20px;
  }

  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .resumeLink {
    cursor: pointer;
    color: #1198ff;
    text-decoration: none;
  }

  .line {
    height: 1px;
    background-color: #c8c8c8;
    margin-top: 3px;
    margin-bottom: 20px;
  }

</style>
